<template>

<div class="xj-home">
<van-nav-bar fixed title="店铺列表" left-arrow @click-left="back()" />
<div class="xj-tab" style="padding-top: 45px;">
  <div style="text-align: center;padding: 20px;color: #ccc;" v-show="shopList.length <= 0">暂无数据</div>
  <div class="xj-content">
    <div class="fujin">
      <ul>
        <li v-for="(item, index) in shopList" :key="index" @click="jump('store', {id: item.b_id})">
          <div class="left">
            <img class="xj-store-img" v-lazy="publicUrl + item.image" alt="">
          </div>
          <div class="right">
            <div class="name">{{item.b_title}}</div>
            <div style="color: #717171;">{{item.address}}</div>
            <div class="distand">
              <span>
                <van-rate readonly size='14' style="float:left" v-model="item.score" allow-half void-icon="star" void-color="#eee" />
                <span>{{item.score}}</span>
              </span>
              <span style="float:right">{{item.juli.toFixed(2)}}km</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
  </div>
</template>
<script>
import { postShopList } from '../../api/ajax';

export default {
  data: function () {
    return {
      activeClass: 0,
      itemList: [
        { text: '附近的店' },
        { text: '人气排名' },
        { text: '领券排名' },
      ],
      value: 4.5,
      shopList: []
    }
  },
  methods: {
    getItme(index) {
      this.activeClass = index;  // 把当前点击元素的index，赋值给activeClass
    },
    async postShopList(lat, lng, keyword) {
      const { cid } = this.$route.query
      const result = await postShopList({
        lat,
        lng,
        cid,
        keyword
      })
      console.log(result)
      this.shopList = result;
    }
  },
  mounted() {
    let locationPoint = this.$pcCookie.get('locationPoint') || '';
    let currentCity = this.$pcCookie.get('locationCity') || '';
    this.lng = locationPoint.split(',')[0];
    this.lat = locationPoint.split(',')[1];
    this.postShopList(this.lat, this.lng, this.keyword);
  }
};
</script>
<style lang="scss" scoped>
.xj-tab {
    padding-bottom: 50px;
  }
  .xj-top {
    background-color: #fff;
    height: px2rem(33);
    // margin-top: px2rem(20);
    text-align: center;
    font-size: px2rem(14);
    // font-weight: bold;
    border-top: 1px #eeeeee solid;
    border-bottom: 1px #eeeeee solid;
    padding-top: 12px;
    position: relative;
    li {
      height: px2rem(25);
      color: #5e5e5e;
      float: left;
      width: 25%;
      line-height: px2rem(25);
    }
    li:last-child {
      color: #aaa;
    //   float: right;
    text-align: right;
    //   background-color: orange;
      border-radius: px2rem(25);
      margin: auto auto;
    }
    .active {
      color: orange;
    }
    .xj-right-fiexd {
      position: absolute;
      right: px2rem(15);
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .xj-content {
    background-color: #fff;
    padding-bottom: px2rem(45);
    .xj-store-img {
      width: 100%;
      height: 100%;
    }
    li {
      width: 100%;
      // background-color: red;
      border-bottom: px2rem(5) #f4f4f4 solid;
      position: relative;
      .left {
        position: absolute;
        left: px2rem(15);
        top: px2rem(15);
        height: px2rem(65);
        width: px2rem(65);
        border-radius: px2rem(5);
        overflow: hidden;
      }
      .right {
        // float: left;
        // width: 80%;
        padding-top: px2rem(12);
        padding-left: px2rem(95);
        padding-right: px2rem(15);
        .name {
          margin-bottom: px2rem(5);
          font-weight: bold;
          font-size: px2rem(16);
        }
        div:nth-child(2) {
          position: relative;
          overflow: hidden;
          span {
            // position:absolute;
            float: left;
            // left: 25%;
            // display: block;
            // top: px2rem(-2);
            padding-left: px2rem(3);
            // padding-top:  px2rem(5);
            font-size: px2rem(14);
          }
        }
        .distand {
          padding-top: px2rem(15);
          padding-bottom: px2rem(4);
          // border-bottom: px2rem(1) #f3f3f3 solid;
          color: #838182;
        }
        .news {
          div {
            line-height: px2rem(32);
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 60%;
          }
          span:last-child {
            line-height: px2rem(32);
            float: right;
          }
        }
      }
    }
  }
</style>
